<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 80%;
            margin: 20px auto;
            background-color: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
            color: #333;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 10px;
            text-align: left;
            text-align: center;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        .actions {
            display: center;
            gap: 10px;
        }
        .actions form, .actions a {
            display: inline-block;
        }
        .add-button {
            display: block;
            width: 100px;
            margin: 0 auto;
            padding: 10px;
            background-color: #00A2E8;
            color: white;
            text-align: center;
            text-decoration: none;
            border-radius: 5px;
        }
        .add-button:hover {
            background-color: #3282F6;
        }
        /* 添加表单的卡片样式 */
        .card {
            width: 300px;
            position: absolute; /* 使用绝对定位 */
            top: 50%; /* 距离顶部50% */
            left: 50%; /* 距离左侧50% */
            transform: translate(-50%, -50%); /* 将元素中心对齐到页面中心 */
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            z-index: 1000; /* 确保卡片覆盖其他内容上，这里指原有的表格 */
        }
        /* 卡片标题 */
        .card-title {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
        }
        /* 表单元素样式 */
        .card input, .card select {
            width: 90%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        /* 提交按钮样式 */
        .card button{
            display: block;
            width: 90%;
            padding: 10px;
            text-align: center;
            border: none;
            border-radius: 3px;
            color: #fff;
            background-color: #007BFF;
            text-decoration: none;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>学生信息列表</h1>
        <table>
            <thead>
            <tr>
                <th>编号</th>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>所属院系</th>
                <th>班级</th>
                <th>家庭住址</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for record in records %}
            <tr id="record-{{record.Sno}}">
                <!-- 使用loop.index来生成ID -->
                <td>{{ loop.index }}</td>
                <td>{{ record.Sno }}</td>
                <td>{{ record.Sname }}</td>
                <td>{{ record.Ssex }}</td>
                <td>{{ record.Sage }}</td>
                <td>{{ record.Dno }}</td>
                <td>{{ record.Sclass }}</td>
                <td>{{ record.address }}</td>

                <!-- 最后一栏的编辑、删除按钮 -->
                <td class="actions">
                <form action="{{ url_for('update_record', Sno=record.Sno) }}" method="get">
                        <button type="submit" class="btn-edit">修改</button>
                </form>
                <form action="{{ url_for('delete_record',Sno=record.Sno) }}">
                    <button type="submit" class="btn-delete">删除</button>
                </form>
                </td>

            </tr>
            {% endfor %}
            </tbody>
        </table>

        <!-- 添加按钮 -->
        <a href="{{ url_for('add_record') }}" class="add-button">添加</a>
        <!-- 弹出表单 -->
        <div id="add-form" class="card" style="display:none;">
        <div class="card-title">添加学生信息</div>
        <form id="record-form" method="POST" action="{{ url_for('add_record') }}">
            <!-- 表单字段 -->
            <input type="text" name="Sno" placeholder="学号" required>
            <input type="text" name="Sname" placeholder="姓名" required>
            <select id="Ssex" name="Ssex" placeholder="性别" required>
            <option value="" disabled selected>选择性别</option>
            <option value="男">男</option>
            <option value="女">女</option>
            </select>
            <input type="text" name="Sage" placeholder="年龄" required>
            <input type="text" name="Dno" placeholder="所属院系" required>
            <input type="text" name="Sclass" placeholder="班级" required>
            <input type="text" name="address" placeholder="家庭住址" required>
            <button type="submit">确认</button>
            <a href="#" class="close-form-btn">取消</a>
        </form>
        </div>

        <script>
        document.addEventListener('DOMContentLoaded', function() {
            var addButton = document.querySelector('.add-button');
            var closeFormBtn = document.querySelector('.close-form-btn');
            var addForm = document.getElementById('add-form');
            var recordForm = document.getElementById('record-form');

            // 点击添加按钮时显示表单
            addButton.addEventListener('click', function(event) {
                event.preventDefault(); // 阻止链接或按钮的默认行为
                addForm.style.display = 'block'; // 显示表单
            });

            // 点击取消链接时隐藏并清空表单
            closeFormBtn.addEventListener('click', function(event) {
                event.preventDefault(); // 阻止链接的默认行为
                addForm.style.display = 'none'; // 隐藏表单

                // 清空表单内的所有输入字段
                recordForm.querySelectorAll('input, select').forEach(function(input) {
                    // 对于文本输入框和下拉选择框
                    if (input.type === 'text' || input.type === 'select-one') {
                        input.value = ''; // 清空值
                    }else if (input.type === 'select-one') {
                            // 对于下拉选择框，这里需要重置为第一个不可选项
                            var firstOption = input.querySelector('option:(:disabled)');
                            if (firstOption) {
                                firstOption.selected = true;
                            }
                        }
                });
            });


        });

        </script>

    </div>
</body>
</html>
